import IconFont from '@/components/IconFont';
import { Input } from 'antd';
import { useEffect, useState } from 'react';
import Typography from '../Typography';
import Style from './index.module.less';

function CommonInput(props) {
  const { placeholder, showCount, showEditIcon, allowclear, wrapperStyle, ...arg } = props;
  const [isShowPlaceholder, setIsShowPlaceholder] = useState(!arg.value);

  useEffect(() => {
    setIsShowPlaceholder(!arg.value);
  }, [arg.value]);

  let rightIcon = null;
  if (showEditIcon) {
    rightIcon = <IconFont style={{ cursor: 'pointer' }} type="icondirect-input" />;
  }

  const style = {
    ...arg.style,
    paddingRight: showCount ? 54 : undefined,
  };

  const [isFocus, setIsFocus] = useState(false);
  // { clearIcon: <IconFont type="iconguanbi2fill" style={{ fontSize: 16, cursor: 'pointer' }} /> }
  const clearIcon = allowclear && isFocus ? true : undefined;

  return (
    <div className={Style['c-input-wrapper']} style={wrapperStyle}>
      <Input
        suffix={rightIcon}
        {...arg}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        // onInput={(e) => {
        //   setIsShowPlaceholder(!e.target.value);
        // }}
        style={style}
        allowclear={clearIcon}
      ></Input>
      {placeholder && isShowPlaceholder && (
        <div className={Style['ant-input-placeholder']}>
          {!!arg['aria-required'] && <Typography type="error">*&nbsp;</Typography>}
          {placeholder}
        </div>
      )}

      {showCount && (
        <div className={Style['count-info']}>
          <Typography as="a1" color="#999">
            {props.value?.length || 0}
          </Typography>
          /
          <Typography as="a1" color="#B1B7C3">
            {props.maxLength}
          </Typography>
        </div>
      )}
    </div>
  );
}
export default CommonInput;
